<!DOCTYPE html>
<html>
	<head>
		 <meta charset="utf-8">
		<title>练习</title>
		<script src="js/d3.v4.min.js" charset="utf-8"></script>
	</head>
	<style>
		.areaStyle{
			fill:yellow;
			stroke:black;
			stroke-width:3px;
			opacity: 0.5;
		};
	</style>
	<body>
		
		<script>
			var dataset=[
						 [1,5000],[2,7000],[3,8500],[4,9800],[5,11000],
						 [6,12000],[7,12200],[8,11800],[9,11000],[10,9700]
						];
			var height=600;
			var width=600;
			var padding={left:50,top:20,right:50,bottom:20};
			var xAxisWidth=width-padding.left-padding.right;
			var yAxisHeight=height-padding.top-padding.bottom;
			var svg=d3.select("body").append("svg").attr("height",height).attr("width",width);
			//定义比例尺
			var xScale=d3.scaleLinear()
					     .domain([0,Math.round(d3.max(dataset,function(d){return d[0];}))*1.1])
					     .range([0,xAxisWidth]);
			var yScale=d3.scaleLinear()
						 .domain([0,Math.round(d3.max(dataset,function(d){return d[1];}))*1.1])
						 .range([0,yAxisHeight]);
			var color=d3.scaleOrdinal(d3.schemeCategory20);
			//添加圆形散点
			var circle=svg.selectAll("circle")
						  .data(dataset)
						  .enter()
						  .append("circle")
						  .attr("cx",function(d,i){return padding.left+xScale(d[0]);})
						  .attr("cy",function(d,i){return height-padding.bottom-yScale(d[1]);})
						  .attr("r","5px")
						  .attr("fill",function(d,i){return color(i);});
						  
			//添加折线
			var linePath=d3.line()
						   .x(function(d){return xScale(d[0]);})
						   .y(function(d){return yScale(d[1]);});
			yScale.range([yAxisHeight,0]);
			svg.selectAll("path")
				.data(dataset)
				.enter()
				.append("path")
			   	.attr("d",linePath(dataset))
			   	.attr("stroke","black")
			   	.attr("stroke-width","3px")
			   	.attr("fill","none")
			   	.attr("transform","translate("+padding.left+","+padding.top+")");
			
			//添加坐标轴
			var xAxis=d3.axisBottom(xScale);
			var yAxis=d3.axisLeft(yScale);
//			yScale.range([yAxisHeight,0])
			svg.append("g")
			   .attr("transform","translate("+padding.left+","+(padding.top+yAxisHeight)+")")
			   .call(xAxis);
			svg.append("g")
			   .attr("transform","translate("+padding.left+","+(padding.top)+")")
			   .call(yAxis);
		</script>
		
	</body>
</html>
